<template>
    <div v-if="showProduct">
        <div class="title">
            <img src="http://api.qqguang.com/static/style/enfenqi/mix/mobile/image/updata_time.png">
        </div>
        <ul>
            <router-link
                tag="li"
                class="product-view"
                v-for="item in list"
                :key="item.properties.product_id"
                :to="'/product/detail?product_id='+item.properties.product_id"
            >
                <img :src="item.properties.image">
                <div>
                    <div class="name">{{item.properties.title}}</div>
                    <div class="brief">{{item.properties.brief}}</div>
                    <div class="price">￥ {{item.properties.price}}</div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'homeRecommend',
  data() {
    return {

    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    showProduct() {
      return this.list.length
    }
  }
}
</script>

<style lang="less" scoped>
@import "~styles/mixin.less";
.title{
    .h(92);
    .lh(92);
    text-align: center;
    img{
        .w(186);
        .h(36);
    }
}
.product-view{
    .padding(20,20);
    .flexwrap();
    background: #fff;
    img{
        .w(284);
        .h(284);
    }
    > div{
        position:relative;
        .ml(20);
        .flexcon();
        .name{
            font-size:14px;
            .margin(8,0);
            .lh(40);
            text-align:left;
            .ellipsis2();
        }
        .brief{
            .mt(40);
            color:#606060;
            .ellipsis2();
            .lh(32);
        }
        .price{
            position: absolute;
            .bottom(20);
            .left(0);
            color: #FF2F55;
        }
    }

}
</style>
